import React from 'react'
import Table from 'components/Tables/Base'
import style from './ProjectStatus.scss'

const ProjectStatus = () => {
  const [list, setList] = React.useState([])
  React.useEffect(() => {
    request
      .get(
        '/kapis/clusters/host/monitoring.kubesphere.io/v1alpha3/namespaces/project/workloads?type=rank&metrics_filter=workload_cpu_usage%7Cworkload_memory_usage_wo_cache%7Cworkload_net_bytes_transmitted%7Cworkload_net_bytes_received%7Creplica&page=1&limit=10&sort_type=desc&sort_metric=workload_cpu_usage'
      )
      .then(res => {
        const { results = {} } = res
        const data = []
        results.forEach(i => {
          const val = {}
          if (i?.data?.result?.[0]?.metric) {
            i?.data?.result?.forEach(values => {
              val[values?.metric?.workload] = values?.value?.[1]
            })
            data.push({ [i.metric_name]: val })
          }
        })

        const dataList = []
        const serverNameList = Object.keys(
          Object.values(
            data.find(item => item['workload_deployment_replica_available'])
          )[0]
        )
        serverNameList.forEach(i => {
          dataList.push({
            name: i.split(':')[1],
            type: i.split(':')[0],
          })
        })
        dataList.forEach(i => {
          data.forEach(item => {
            i[Object.keys(item)[0]] = Object.values(item)[0][
              `${i.type}:${i.name}`
            ]
          })
        })
        console.log(data, dataList, 'qqq')
        setList(dataList)
      })
  }, [])

  return (
    <div className={style.content}>
      <div className="left">
        <div className="item">
          <img src="/assets/new/server.png" />
          <p>服务总数</p>
          <p className="value">{list.length}</p>
        </div>
        <div className="item">
          <img src="/assets/new/server-client.png" />
          <p>服务实例数量</p>
          <p className="value">6</p>
        </div>
        <div className="item">
          <img src="/assets/new/error.png" />
          <p>服务异常数量</p>
          <p className="value">0</p>
        </div>
      </div>
      <div className="right">
        <Table
          hideHeader
          hideFooter
          rowKey="name"
          data={list}
          loading={false}
          columns={[
            {
              title: '服务名称',
              dataIndex: 'name',
              render: v => {
                return (
                  <>
                    <img
                      style={{
                        width: '30px',
                        height: '30px',
                        marginRight: '10px',
                      }}
                      src="/assets/new/row.png"
                    />
                    <span style={{ lineHeight: '30px', verticalAlign: 'top' }}>
                      {v}
                    </span>
                  </>
                )
              },
            },
            {
              title: '服务类型',
              dataIndex: 'type',
            },
            {
              title: 'CPU使用量(M)',
              dataIndex: 'workload_cpu_usage',
              render: v => (v ? Math.floor(Number(v) * 1024) : 0),
            },
            {
              title: '内存使用量(M)',
              dataIndex: 'workload_memory_usage_wo_cache',
              render: v => (v ? Math.floor(Number(v) / 1024 / 1024) : 0),
            },
            {
              title: '出站流量(Kb)',
              dataIndex: 'workload_net_bytes_transmitted',
              render: v => (v ? Math.floor(Number(v)) : 0),
            },
            {
              title: '入站流量(Kb)',
              dataIndex: 'workload_net_bytes_received',
              render: v => (v ? Math.floor(Number(v)) : 0),
            },
          ]}
        />
      </div>
    </div>
  )
}

export default ProjectStatus
